<template>
  <q-page class="q-pa-md" v-loading="loading">
    <!--标题-->
    <div class="title">
      <q-breadcrumbs class="q-mb-md title_wrap">
        <el-icon class="icon" @click="router.go(-1)">
          <ArrowLeft />
        </el-icon>
        <q-breadcrumbs-el label="显示模型版本名称" />
      </q-breadcrumbs>
    </div>
    <div class="title_content">
      <div class="row">
        <div class="col">模型来源：<i>{{ versionsInfo.model_title }}</i></div>
        <div class="col">创建人：<i>{{ versionsInfo.creator_username }}</i></div>
        <div class="col">创建时间：<i>{{ versionsInfo.create_at }}</i></div>
      </div>
      <div class="row">
        <div class="col">模型版本说明：<i>{{ versionsInfo.description }}</i></div>
        <div class="col">版本号：<i>{{ versionsInfo.version_number }}</i></div>
        <div class="col"></div>
      </div>
    </div>

    <el-menu :default-active="activeIndex" class="tabs" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" style="font-size: 13px">版本文件</el-menu-item>
      <el-menu-item index="2" style="font-size: 13px">评估报告</el-menu-item>
    </el-menu>
    <div v-if="chooseNumber == '1'">
      <el-table
        :data="tableData1"
        style="width: 100%"
        row-key="id"
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="path" label="名称" />
        <el-table-column prop="upload_at" label="上传日期" />
        <el-table-column prop="file_size" label="大小" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-tag v-if="!row.is_dir" style="cursor: pointer"  size="large" @click="downLoadFile(row.path)">下载</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="row" style="justify-content:flex-end;" v-if="tableData1.length > 0">
        <el-pagination
          background layout="prev, pager, next"
          style="margin-top: 20px;"
          :total="tableDate.count"
          :current-page="pageData.page"
          :page-size="10"
          @current-change="changePage"
        />
      </div>
    </div>
<!--    <el-table-column align="center" prop="title" label="名称" width="180">-->
<!--      <template #default="scope">-->
<!--        <el-button link type="primary" @click="toDetailPage(scope.row.id)">{{ scope.row.title }}</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <div v-if="chooseNumber == '2'">-->
<!--      <el-table :data="assessDataArrayList" stripe style="width: 100%;margin: 0 auto;;"-->
<!--                :header-cell-style="{ background: '#f6f6f6', color: '#333333' }">-->
<!--            <el-table-column align="center" prop="title" label="名称">-->
<!--              <template #default="scope">-->
<!--                <div style="display: flex">-->
<!--                  <p>{{ scope.row.title }}</p>-->
<!--                  <el-image-->
<!--                    @click="toMetricHistory(scope.row.title)"-->
<!--                    style="width: 22px; height: 22px;margin-left: 5px;cursor: pointer"-->
<!--                    :src="curve"-->
<!--                    fit-->
<!--                  />-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--        <el-table-column prop="value" label="数据" />-->
<!--        <template #empty>-->
<!--          <div>暂无数据</div>-->
<!--        </template>-->
<!--      </el-table>-->
<!--    </div>-->
    <div class="assessmentReportWrap row" v-if="chooseNumber == '2'">
      <div class="col col-2 searchTableLeft">
        <el-input
          v-model="searchName"
          class="w-50 m-2 inputs"
          placeholder="搜索label名称"
          :suffix-icon="Search"
        ></el-input>
        <el-table
          class="tableLeft"
          ref="table"
          highlight-current-row
          :data="filterTableData"
          border
          :header-cell-style="{ background: '#eee', color: '#101010', fontWeight: 'normal' }"
          row-key="data"
          :row-class-name="tableRowClassName"
          @row-click="clickRowHandle"
        >
          <el-table-column prop="date" label="Label" />
          <el-table-column prop="name" label="Score" />
        </el-table>
      </div>
      <div class="col chartListRight">
        <div class="title">评估参数 <i>样本数量：300</i></div>
        <div class="row dataList">
          <transition name="fade">
            <div class="col" v-show="isGraph">
              <div class="dataItemWrap">
                <span class="dataItemTitle">Accuracy</span>
                <el-tooltip trigger="click" class="box-item"  effect="light" placement="right-start">
                  <template #content>
                    <span>准确率。</span><br/>
                    <span>分类正确的样本数占总样本数的比例。</span> <br/>
                    <span>该指标越接近1则模型质量越高。</span>
                  </template>
                  <el-button
                    class="questionMarkBtn"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div class="questionMarkNumber">0.521</div>
            </div>
          </transition>
            <div class="col">
              <div class="dataItemWrap">
                <span class="dataItemTitle">AuPRC</span>
                <el-tooltip trigger="click" class="box-item"  effect="light " placement="right-start">
                  <template #content>
                    <span>Precision-Recall 曲线下的面积</span><br/>
                    <span>该指标越接近1则模型质量越高。</span> <br/>
                    <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                  </template>
                  <el-button
                    class="questionMarkBtn"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div class="questionMarkNumber">0.521</div>
            </div>
            <div class="col">
              <div class="dataItemWrap">
                <span class="dataItemTitle">AuROC</span>
                <el-tooltip trigger="click" class="box-item"  effect="light" placement="right-start">
                  <template #content>
                    <span>ROC 曲线下的面积</span><br/>
                    <span>该指标越接近1则模型质量越高。</span> <br/>
                    <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                  </template>
                  <el-button
                    class="questionMarkBtn"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div class="questionMarkNumber">0.521</div>
            </div>
            <div class="col">
              <div class="dataItemWrap">
                <span class="dataItemTitle">Recall</span>
                <el-tooltip trigger="click" class="box-item"  effect="light" placement="right-start">
                  <template #content>
                    <span>召回率</span><br/>
                    <span>该指标越接近1则模型质量越高。</span> <br/>
                    <span>该指标描述再所有正例中有多少被预测出来 (预测的是否完整)。</span> <br/>
                    <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                  </template>
                  <el-button
                    class="questionMarkBtn"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div class="questionMarkNumber">0.521</div>
            </div>
            <div class="col">
              <div class="dataItemWrap">
                <span class="dataItemTitle">Precision</span>
                <el-tooltip trigger="click" class="box-item"  effect="light " placement="right-start">
                  <template #content>
                    <span>精确率</span><br/>
                    <span>该指标越接近1则模型质量越高。</span> <br/>
                    <span>该指标反映了在预测成正例的结果中预测正确的比例 (预测的是否完整)</span> <br/>
                    <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                  </template>
                  <el-button
                    class="questionMarkBtn"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div class="questionMarkNumber">0.521</div>
            </div>
            <div class="col">
              <div class="dataItemWrap">
                <span class="dataItemTitle">F1 Score</span>
                <el-tooltip trigger="click" class="box-item"  effect="light " placement="right-start">
                  <template #content>
                    <span>F1分数。</span><br/>
                    <span>Recall和Precision共同作用下的指标,该指标越接近1则模型质量越高。</span> <br/>
                    <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                  </template>
                  <el-button
                    class="questionMarkBtn"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <div class="questionMarkNumber">0.521</div>
            </div>
        </div>
        <p class="assessmentReportTitle">
          <b>指标报告</b>
        </p>
        <div class="row">
          <div class="col chartWrap">
            <div class="chartLeftWrap">
              <div class="chartLeft">
                  <span class="chartLeftTitle">PR Curve</span>
                  <el-tooltip class="box-item" effect="light" placement="right-start">
                    <template #content>
                      <span>Precision-Recall曲线</span><br/>
                      <span>通过该曲线可查看Precision随Recall变化的趋势,</span> <br/>
                      <span>曲线越靠近左上角则模型质量越高。</span> <br/>
                      <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                    </template>
                    <el-button
                      style="transform: scale(.5);transform-origin:left; font-size: 18px;color: rgb(85,85,85);border-color: #1D1D1D;"
                      size="small" circle>?
                    </el-button>
                  </el-tooltip>
              </div>
              <el-select v-model="PRCureValue" style="width: 150px;margin-right: 10px">
                <el-option label="Macro" value="Macro" />
                <el-option label="Weighted" value="Weighted" />
              </el-select>
            </div>
            <div>
              <div style="position: relative">
                <div style="position: absolute;top: 80px; transform: rotate(-90deg);">Precision</div>
                <div>
                  <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
                </div>
              </div>
              <div style="position: relative;left: 50px;top: -5px">Recall</div>
            </div>
          </div>
          <div class="col chartWrap">
            <div class="chartLeftWrap">
              <div class="chartLeft">
                <span class="chartLeftTitle">ROC Curve</span>
                <el-tooltip style="margin-left: 5px" effect="light" placement="right-start">
                    <template #content>
                      <span>Receiver Operating Characteristic曲线</span><br/>
                      <span>通过该曲线可查看True Positive Rate随 False Positive Rate变化的趋势,</span> <br/>
                      <span>曲线越靠近左上角则模型质量越高。</span> <br/>
                      <span>多分类的场景下分别以Micro、Macro、Weighted三种方式计算该指标。</span>
                    </template>
                    <el-button
                      style="transform: scale(.5);transform-origin:left; font-size: 18px;color: rgb(85,85,85);border-color: #1D1D1D;"
                      size="small" circle>?
                    </el-button>
                  </el-tooltip>
              </div>
              <el-select v-model="ROCCurveValue" style="width: 150px;margin-right: 10px">
                <el-option label="Macro" value="Macro" />
                <el-option label="Weighted" value="Weighted" />
              </el-select>
            </div>
            <div>
              <div style="position: relative">
                <div style="position: absolute;top: 80px;left: -20px; transform: rotate(-90deg);">Ture positive rate</div>
                <div>
                  <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
                </div>
              </div>
              <div style="position: relative;left: 50px;top: -5px">False positive rate</div>
            </div>
          </div>
        </div>
        <div class="titleBox" style="margin-top: 10px;border: 1px solid rgb(232, 232, 234);">
          <template v-if="isGraph">
              <div style="display: flex;align-items: center;height: 50px;margin-left: 15px">
                <span style="margin-right: 2px">Confusion Matrix</span>
                <el-tooltip style="margin-left: 5px" effect="light" placement="right-start">
                  <template #content>
                    <span>混淆矩阵</span><br/>
                    <span>展示样本被预测成各类别的数量或比例。</span> <br/>
                    <span>矩阵中对角线的数值越大模型质量越高。</span> <br/>
                    <span>当模型预测的类别数量不超过20时可直接在网页上查看，否则需要下载.csv到本地查看效果。</span>
                  </template>
                  <el-button
                    style="transform: scale(.5);transform-origin:left; font-size: 18px;color: rgb(85,85,85);border-color: #1D1D1D;"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
              </div>
              <heatMap></heatMap>
            </template>
          <div class="False" v-else>
              <div class="Positives">
                False Positives
                <el-tooltip class="box-item" effect="light " content="错误预测成正例的样本（真实类别为负例，预测结果为正例）。默认展示前20个示例。" placement="right-start">
                  <el-button
                    style="transform: scale(.5);transform-origin:left;font-size: 18px;color: #333;border-color: #333;"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
                <el-table
                  :header-cell-style="{
                    'text-align': 'center',
                    'font-size': '12px',
                    'background': 'rgb(232,232,232)',
                    'color': '#000',
                    'border': '1px solid rgb(232,232,232)'
                  }"
                            :cell-style="{
                    'text-align': 'center',
                    'border': '1px solid rgb(232,232,232)',
                    'font-size': '12px',
                  }"
                  :data="positivesData"
                  style="width: 100%;height: 220px;margin-top: 10px">
                  <el-table-column prop="number" width="100" />
                  <el-table-column prop="simple" label="Simple" />
                  <el-table-column prop="groundTruth" label="Ground Truth" />
                </el-table>
              </div>
              <div class="Negative">
                False Negative
                <el-tooltip class="box-item" effect="light " content="1错误预测成正例的样本（真实类别为负例，预测结果为正例）。默认展示前20个示例。" placement="right-start">
                  <el-button
                    style="transform: scale(.5);transform-origin:left;font-size: 18px;color: #333;border-color: #333;"
                    size="small" circle>?
                  </el-button>
                </el-tooltip>
                <el-table
                  :header-cell-style="{
                    'text-align': 'center',
                    'font-size': '12px',
                    'background': 'rgb(232,232,232)',
                    'color': '#000',
                    'border': '1px solid rgb(232,232,232)'
                  }"
                  :cell-style="{
                    'text-align': 'center',
                    'border': '1px solid rgb(232,232,232)',
                    'font-size': '12px',
                  }"
                  :data="NegativeData"
                  style="width: 100%;height: 200px;margin-top: 10px">
                  <el-table-column prop="number"  width="100" />
                  <el-table-column prop="simple" label="Simple" />
                  <el-table-column prop="groundTruth" label="Ground Truth" />
                </el-table>
              </div>
            </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import curve from 'assets/dataSet/curve.png'
import { reduce, size } from "lodash";
import {computed, reactive, ref, toRaw, shallowRef} from "vue";
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import {getModelVersionsDetail, getFileList, downFiles, getReportData} from 'src/api/model'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { modelStore } from 'src/stores/model';
const showModelStore = modelStore()
import chartLine from 'src/components/chartLine.vue'; //echart图例组件
import heatMap from './heatMap.vue' //热力图
import {ElMessage, ElMessageBox} from "element-plus";
import {downloadFeatureset} from "src/api/dataset";
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const activeIndex = ref('2')
let chooseNumber = ref('2')
const loading = ref(true)
let assessDataArrayList = shallowRef(<any>[])
const versionsInfo = ref({});//仓库模型版本详情信息
let isHigh = ref(0);
const handleSelect = (key: string, keyPath: string[]) => {
  chooseNumber.value = key
}
const searchName = ref('')
const chastSize = reactive({
  width: '100%',
  height: "220px"
})
const chartOption2 = reactive({
  tooltip: {
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#fff'
      }
    },
    trigger: 'axis',
  },
  grid: {
    left: '15%',
    right: '10%',
    bottom: '5%',
    top: '8%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['0%', '25%', '50%', '75%', '100%']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      interval: 'auto',
      formatter: '{value} %'
    },
    show: true
  },
  series: [
    {
      name: 'GPU',
      data: [20, 30, 50, 100, 30, 40, 65],
      color: 'rgb(108,174,235)',
      type: 'line',
      smooth: true,
      areaStyle: {
      }
    }
  ]
})
const filterTableData = computed(() =>
  tableData.value.results.filter(
    (data) =>
      !searchName.value ||
      data.date.toLowerCase().includes(searchName.value.toLowerCase())
  )
)
let tableData = ref(
  {
    count: 0,
    next: null,
    previous: null,
    results: [
      {
        date: '全部',
        name: '0.9'
      },
      {
        date: 'dog',
        name: '0.7'
      },
      {
        date: 'cat',
        name: '0.4'
      },
      {
        date: 'pig',
        name: '0.56'
      },
      {
        date: 'monkey',
        name: '0.96'
      },
    ]
  }
)
const PRCureValue = ref("");
const ROCCurveValue = ref("");

const pageData = ref({
  page: 1
})
let tableDate = reactive({
  count: 0,
  next: null,
  previous: null,
  results: []
})


const tableData1 = ref([])
FileList('');
function FileList(path:string) {
  const projectId = router.currentRoute.value.params.project_id
  const repository_model_id = showModelStore.repository_model_id
  const version_ids = showModelStore.version_id;
  getFileList(projectId,repository_model_id,version_ids,path).then( res => {
    res.data.forEach( (items:any) => {
      if( items.is_dir ){
        items.hasChildren = true;
      }
    })
    tableData1.value = res.data;
  })
}
const downLoadFile = (path:string) => {
  ElMessageBox.confirm('确定下载该版本文件吗？', '数据下载', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  }).then(() => {
    const projectId = router.currentRoute.value.params.project_id
    const repository_model_id = showModelStore.repository_model_id
    const version_ids = showModelStore.version_id;
    downFiles(projectId,repository_model_id,version_ids,path).then( res => {
      let urlObject = window.URL || window.webkitURL || window;
      let export_blob = new Blob([res.data]);
      let save_link = document.createElement("a")
      save_link.href = urlObject.createObjectURL(export_blob);
      save_link.download = path;
      save_link.click();
    })
  })
}
getReport()
function getReport(){
  const projectId = router.currentRoute.value.params.project_id
  const repository_model_id = showModelStore.repository_model_id
  const version_ids = showModelStore.version_id;
  getReportData(projectId,repository_model_id,version_ids).then( (res:any) => {
    assessDataArrayList.value = filterType(res.data)
  })
}
// 解析评估结果数据
const filterType = (data: any) => {
  let filterTitle = Object.keys(data)
  let filterVakue = Object.values(data)
  let newArr = filterTitle.map((item, index) => {
    let obj = {
      title: item,
      value: filterVakue[index]
    }
    return obj
  })
  return newArr
}
interface User {
  path: string
  upload_at: string
  file_size: string
  hasChildren?: boolean
  children?: User[]
}
 const load = async(
  row:any,
  treeNode: unknown,
  resolve: (date: User[]) => void
) => {
  let rows:any = row;
  const path:string = toRaw(rows.path)
  const projectId = router.currentRoute.value.params.project_id
  const repository_model_id = showModelStore.repository_model_id
  const version_ids = showModelStore.version_id;
  await getFileList(projectId,repository_model_id,version_ids,path).then( (res) => {
    res.data.forEach( (items:any,index:number)=> {
      items.id = ++index
    })
    resolve(res.data);
  })
}
function tableRowClassName({row, rowIndex}:{row:any,rowIndex:any}) {
  if( isHigh.value === 0 ){
    if( rowIndex === 0 ){
      return 'warning-row';
    }
  }
  return '';
}

getData()
function getData() {
  loading.value = false
}

const positivesData = [
  {
    number: '1',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'duck'
  },
  {
    number: '2',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'lion'
  },
  {
    number: '3',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'fox'
  },
  {
    number: '4',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'cat'
  }
]
const NegativeData = [
  {
    number: '1',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'duck'
  },
  {
    number: '2',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'lion'
  },
  {
    number: '3',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'fox'
  },
  {
    number: '4',
    simple: '文本显示语料case,图像显示半径+图像名称（或者支持预览图片）',
    groundTruth: 'cat'
  }
];
const isGraph = ref(true);
const clickRowHandle = (row:any) => {
  isHigh.value =1;
  let {date} = toRaw(row);
  date === '全部'?isGraph.value = true:isGraph.value = false;
}

//获取模型版本详情
getVersionsDetail();
function getVersionsDetail () {
  const projectId = router.currentRoute.value.params.project_id
  const repository_model_id = showModelStore.repository_model_id
  const version_ids = showModelStore.version_id;
  getModelVersionsDetail(projectId,repository_model_id,version_ids).then( (res:any) => {
    versionsInfo.value = res.data
  }).catch(error => {
    loading.value = false
    ElMessage.error(`请求详情数据报错,提示${error.data}`)
  })
}
const props = {
  label: 'name',
  children: 'children',
  isLeaf: 'leaf',
}
const loadNode = (node: Node, resolve: (data:any) => void) => {
  if (node.level === 0) {
    return resolve([{ name: 'region',date: '2023-04-18 22:33:11', },{ name: 'hhc',date: '2023-04-18 22:33:11', },{ name: 'hhc1',date: '2023-04-18 22:33:11', }])
  }else if (node.level === 1) {
    if( node.label === 'region' ) {
      setTimeout(() => {
        const data:any = [
          {
            name: '第一层成功region',
            leaf: true,
            date: '2023-04-18 22:33:11',
          },
          {
            name: 'zone',
            leaf: true,
            date: '2023-04-18 22:33:11',
          },
        ]
        resolve(data)
      }, 700)
    }
    if( node.label === 'hhc' ) {
      setTimeout(() => {
        const data:any = [
          {
            name: '第一层成功 hhc',
            leaf: true,
            date: '2023-04-18 22:33:11',
          },
          {
            name: 'zone',
            leaf: true,
            date: '2023-04-18 22:33:11',
          },
        ]
        resolve(data)
      }, 700)
    }
    if( node.label === 'hhc1' ) {
      setTimeout(() => {
        const data:any = [
          {
            name: '第一层成功leaf',
            leaf: true,
            date: '2023-04-18 22:33:11',
          },
          {
            name: 'zone',
            leaf: true,
            date: '2023-04-18 22:33:11',
          },
        ]
        resolve(data)
      }, 700)
    }
  }else{
    return resolve([])
  }
}
//toMetricHistory:显示单个评估数据的图表
const toMetricHistory = (value:string) => {
  showModelStore.setMetricKey(value);
  router.push({name:'metric_history'})
}
</script>

<style lang="scss" scoped>

.title {
  position: relative;
  .title_wrap {
    height:50px;
    line-height: 40px;
    border-bottom: 1px dashed #ccc;
    .icon {
      cursor: pointer;
    }
  }
}
.title_content {
  padding: 10px 0 0 20px;
  font-size: 13px;
  .row {
    margin-bottom: 10px;
    i {
      font-style: initial;
      color: #333333;
    }
  }
}

.tabs {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 10px;
}
.percent25 {
  width: 25%;
}

.assessmentReportWrap {
  padding: 10px 30px 0 30px;
  .searchTableLeft {
    margin-right: 30px;
    cursor: pointer;
    .inputs {
      margin-bottom: 20px;
    }
    .tableLeft {
      width: 100%;
      font-size: 14px;
      cursor: pointer
    }
  }
  .chartListRight {
    text-align: center;
    color: #333;
    .title {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;

      i {
        margin-left: 10px;
        font-size: 12px;
        font-style: initial;
        font-weight: initial;
      }

      .False {
        .Positives, .Negative {
          padding: 10px 10px 0 10px;
          border: 1px solid rgb(232, 232, 234)
        }
        .Negative {
          margin-top: 10px;
        }
      }
    }
    .dataList {
      text-align: left;
      box-sizing: border-box;
      background: #DCE7FB;
      padding: 10px 0 10px 30px;
      .col {
        .dataItemWrap {
          display: flex;
          align-items: center;
          .dataItemTitle {
            margin-right: 5px
          }
          .questionMarkBtn {
            transform: scale(.5);
            transform-origin:left;
            font-size: 18px;
            color: rgb(85,85,85);
            border-color: #1D1D1D;
          }
        }
        .questionMarkNumber {
          transform: scale(1, 1.3);
          text-align: left;
        }
        div {
          &:nth-child(1) {
            font-size: 12px;
            color: #9A9A9A;
          }

          &:nth-child(2) {
            font-size: 16px;
            color: #333;
            font-weight: bold;
          }
        }
      }
    }
    .assessmentReportTitle {
      width: 100%;
      text-align: left;
      margin-bottom: 0;
      margin-top: 10px
    }
    .chartWrap {
      flex: 1;
      margin-top: 10px;
      margin-right: 20px;
      border: 1px solid rgb(232,232,234);
      .chartLeftWrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        .chartLeft {
          display: flex;
          align-items: center;
          margin-top: 10px;margin-left: 15px;
          .chartLeftTitle {
            margin-right: 5px
          }
        }
      }
    }
    ::v-deep .el-table__inner-wrapper::before {
      background: none!important;
    }
  }
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 10px 0 -10px;
}

.successDot {
  background: #1FB62F;
}

.errorDot {
  background: #E6376E;
}

.dataTree {
  .row {
    width: 100%;
    .col {
      text-align: left;

      &:nth-child(1) {
        text-indent: 0;
      }

      &:nth-child(2) {
        text-indent: -43px;
      }

      &:nth-child(3) {
        text-indent: -35px;
      }

      &:nth-child(4) {
        text-indent: -18px;
      }
    }

  }

  &::v-deep .el-tree-node__children {
    .col {
      &:nth-child(1) {
        width: calc(25% - 14px);
      }
    }
  }
}
.search {
  ::v-deep .el-input__wrapper:hover{
    box-shadow: none;
  }
  ::v-deep .el-input__wrapper {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid rgb(187,187,187);
  }
}


::v-deep .el-table__body tr.current-row > td,::v-deep .el-table .warning-row {
  color: rgb(58, 141, 255) !important;
  background: #fff;
}
@keyframes slide-out {
  from {
    transform: translateX(0);
    opacity: 1
  }
  to {
    transform: translateX(-100%);
    opacity: 0
  }
}
.fade-enter-active, .fade-leave-active {
  animation: slide-out 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
</style>
